<script>
export default {
  name: "IndexView",
  data(){
    return {
      user: {}
    }
  },
  mounted() {
    //页面挂载后，读取用户信息，转换为对象
    this.user = JSON.parse(localStorage.getItem('user'))
  }
};
</script>
<template>
  <el-container style="height: 100vh;">
    <!-- 新增 el-header 部分，用于放置用户信息下拉菜单 -->
    <el-header>
      <el-dropdown style="float: right;">
        <div>
          <img :src="user.icon" style="width: 50px;height: 50px;border-radius: 50%">
          <span class="el-dropdown-link">
            {{ user.nickname }}
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <router-link to="/updateUser" style="color:#000">个人中心</router-link>
            </el-dropdown-item>
            <!-- 为退出登录添加点击事件 -->
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>
      <!-- 侧边栏导航 -->
      <el-aside class="aside">
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#2c3e50"
            text-color="#ecf0f1"
            active-text-color="#f1c40f"
        >
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-user"></i>
              <span>学生管理</span>
            </template>
            <el-menu-item index="1-1">
              <router-link to="/index/student">学生列表</router-link>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-book"></i>
              <span>课程管理</span>
            </template>
            <el-menu-item index="2-1">
              <router-link to="/index/course">课程列表</router-link>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="3-1">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <i class="el-icon-lock"></i>
              <span>用户权限</span>
            </template>
            <el-menu-item index="4-1">权限设置</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 内容区域 -->
      <el-main class="main">
        <h2 class="title">学生后台管理系统</h2>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<style scoped>
.title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  background: linear-gradient(to right, #2980b9, #6dd5fa);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  margin-top: 10px;
}

.aside {
  width: 220px;
  background-color: #2c3e50;
  color: #ecf0f1;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

/* 侧边栏菜单优化，增加顶部间距 */
.el-menu {
  border-right: none;
  padding-top: 155px; /* 增加顶部间距 */
}

.el-menu-item {
  padding: 10px 20px;
  transition: background-color 0.3s;
}

.el-menu-item:hover {
  background-color: #34495e;
}

.el-submenu .el-menu-item {
  padding: 8px 30px;
  line-height: 1.5;
}

.main {
  background-color: #ecf0f1;
  color: #2c3e50;
  padding: 30px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
